<template>
  <el-dialog
    :title="title"
    width="800px"
    :visible.sync="visible"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :before-close="handleClose"
    @open="openDialog"
  >
    <el-form
      ref="agreeForm"
      :model="form"
      class="form-body"
      :rules="agreeOrRejectRule"
    >
      <header style="font-weight: bold; margin-bottom: 12px;">{{ headerTitle }}</header>
      <div v-if="isSpecialApprove" :style="warningStyle">
        <i class="el-icon-warning" style="margin-right: 10px" />
        <span>此申请为特批申请！</span>
      </div>
      <div v-if="overDue" :style="warningStyle">
        <i class="el-icon-warning" style="margin-right: 10px" />
        <span>该客户有有逾期的回款单！</span>
      </div>
      <div v-if="beyondCredit > 0" :style="warningStyle">
        <i class="el-icon-warning" style="margin-right: 10px" />
        <span>超信用: {{ formatMoneyAmount(beyondCredit) }}</span>
      </div>
      <el-form-item :label="label" prop="approveCommons">
        <el-input
          v-model="form.approveCommons"
          type="textarea"
          resize="none"
          :placeholder="placeholder"
          :rows="5"
        />
      </el-form-item>
      <div style="display: flex; justify-content: flex-end;">
        <el-popconfirm
          v-if="haveRisk"
          confirm-button-text="好的"
          cancel-button-text="取消"
          icon="el-icon-info"
          icon-color="red"
          title="此发货申请存在风险，是否确认审批发货？"
          @confirm="submit"
        >
          <el-button slot="reference" :loading="submitLoading" type="primary" style="margin-right: 12px;">确认</el-button>
        </el-popconfirm>
        <el-button v-else type="primary" :loading="submitLoading" @click="submit">确认</el-button>
        <el-button @click="handleClose">取消</el-button>
      </div>
    </el-form>
  </el-dialog>
</template>

<script>
import { formatMoneyAmount } from '@/utils/tools'
const approveFormValidate = (rule, value, callback) => {
  return callback()
}

const rejectFormValidate = (rule, value, callback) => {
  if (!value || (value && value.trim() === '')) {
    return callback(new Error('请输入驳回说明'))
  }
  return callback()
}

export default {
  name: 'AgreeOrReject',
  emit: ['close', 'submit'],
  props: {
    title: {
      type: String,
      required: true,
      default() {
        return '标题'
      }
    },
    visible: {
      type: Boolean,
      required: true,
      default() {
        return false
      }
    },
    submitLoading: {
      type: Boolean,
      required: true,
      default: false
    },
    data: {
      type: Object,
      required: true,
      default() {
        return {}
      }
    },
    isAgree: {
      type: Boolean,
      required: true,
      default() {
        return false
      }
    }
  },
  data() {
    return {
      form: {
        approveCommons: '' // 驳回、审批说明
      },
      agreeOrRejectRule: {
        approveCommons: [{ required: true, validator: approveFormValidate, trigger: 'blur' }]
      },
      warningStyle: {
        color: '#F56C6C',
        margin: '12px 0'
      },
      formatMoneyAmount
    }
  },
  computed: {
    haveRisk() { // 是否存在风险
      return this.isAgree && (this.beyondCredit > 0 || this.overDue || this.isSpecialApprove)
    },
    beyondCredit() { // 超出额度金额
      return this.data.overAmount
    },
    isSpecialApprove() { // 是否存在特批发货
      return this.data.specialApprove === 1
    },
    overDue() { // 是否逾期
      return this.data.overdue
    },
    headerTitle() {
      return this.isAgree ? '确认完成本次审批？' : '确认驳回此申请？'
    },
    label() {
      return this.isAgree ? '审批说明' : '驳回说明'
    },
    placeholder() {
      return this.isAgree ? '请输入审批说明' : '请输入驳回说明'
    }
  },
  watch: {
    isAgree: {
      handler(newVal) {
        if (newVal) {
          this.agreeOrRejectRule.approveCommons[0].required = false
          this.agreeOrRejectRule.approveCommons[0].validator = approveFormValidate
        } else {
          this.agreeOrRejectRule.approveCommons[0].required = true
          this.agreeOrRejectRule.approveCommons[0].validator = rejectFormValidate
        }
      }
    }
  },
  mounted() {
    this.initRules()
  },
  methods: {
    handleClose() {
      this.$emit('close')
    },
    submit() {
      const { id } = this.data
      const { approveCommons } = this.form
      const param = {
        id,
        approveCommons,
        systemType: 'finance'
      }
      this.$refs.agreeForm.validate(valid => {
        if (valid) {
          this.$emit('submit', param)
        } else {
          return false
        }
      })
    },
    async openDialog() {
      await this.$nextTick()
      this.$refs.agreeForm.clearValidate()
      this.form.approveCommons = ''
    },
    initRules() {
      if (this.isAgree) {
        this.agreeOrRejectRule.approveCommons[0].required = false
        this.agreeOrRejectRule.approveCommons[0].validator = approveFormValidate
      } else {
        this.agreeOrRejectRule.approveCommons[0].required = true
        this.agreeOrRejectRule.approveCommons[0].validator = rejectFormValidate
      }
    }
  }
}
</script>

<style scoped lang="scss">
  .form-body {
    margin-top: -12px;
    .text-error {
      color: red
    }

  }
</style>
